<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>签到页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            text-align: center;
        }

        /* 圆形按钮样式 */
        .check-in-button {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 24px;
            line-height: 150px;
            transition: all 0.3s ease;
        }

        /* 按钮禁用样式 */
        .check-in-button.disabled {
            background-color: gray;
            pointer-events: none; /* 禁用鼠标事件 */
        }
    </style>
    <!-- 引入百度地图 API -->
    <script src="https://api.map.baidu.com/api?v=2.0&ak=rVw6xwQk0KzRqObqF51DkioI8QQKD4Qo"></script>
</head>
<body>
<div class="container">
    <h2>欢迎来到签到页面</h2>
    <button id="checkInButton" class="check-in-button">点击签到</button>
    <p id="message"></p>
    <p id="locationInfo"></p>
</div>

<script>
    // 更新位置信息的函数
    function updateLocationInfo(message) {
        document.getElementById('locationInfo').innerText = message;
    }

    // 获取用户当前位置（IP 定位）
    function getLocationBaiduIp(callback) {
        function myFun(result) {
            if (result && result.center) {
                const lat = result.center.lat;
                const lng = result.center.lng;
                console.log('Located position:', { lat, lng });
                callback({ lat, lng });
            } else {
                console.error('Failed to get location by IP.');
                updateLocationInfo('Failed to get location by IP');
                callback(null);
            }
        }

        var myCity = new BMap.LocalCity();
        myCity.get(myFun);
    }

    document.addEventListener("DOMContentLoaded", function() {
        const button = document.getElementById('checkInButton');
        const message = document.getElementById('message');

        // 从 Thymeleaf 模板中获取活动的经纬度
        const activityLat = parseFloat([[${activity.lat}]]);
        const activityLng = parseFloat([[${activity.lng}]]);
        const userId = [[${user.id}]]; // 用户ID
        const activityId = [[${activity.id}]]; // 活动ID



        button.addEventListener('click', function(event) {
            // 防止多次提交
            event.preventDefault();

            // 检查按钮是否已经被禁用
            if (button.classList.contains('disabled')) return;

            // 禁用按钮防止重复点击
            button.classList.add('disabled');
            button.textContent = '正在签到...';

            // 调用 getLocationBaiduIp 函数获取城市名称和坐标
            getLocationBaiduIp(function(userPosition) {
                if (!userPosition) {
                    button.textContent = '签到失败';
                    message.textContent = '无法获取您的位置，请检查网络连接。';
                    button.classList.remove('disabled');
                    return;
                }

                // 计算距离
                const distanceThreshold = 140; // 例如：1公里以内认为是同一地点
                const distance = calculateDistance(
                    userPosition.lat,
                    userPosition.lng,
                    activityLat,
                    activityLng
                );

                if (distance <= distanceThreshold) {
                    // 签到成功
                    button.textContent = '已签到';
                    message.textContent = '签到成功！';
                    console.log(distance);


                    // // 发送 AJAX 请求通知服务器更新用户的 hour 值
                    // fetch('/toAddHour', {
                    //     method: 'POST',
                    //     headers: {
                    //         'Content-Type': 'application/json'
                    //     },
                    //     body: JSON.stringify({
                    //         userId: userId,
                    //         activityId: activityId
                    //     })
                    // }).then(response => response.json())
                    //     .then(data => {
                    //         if (data.success) {
                    //             // 如果服务器返回成功，则重定向到 /success 页面
                    //             window.location.href = '/toAddHour';
                    //         } else {
                    //             console.error('Failed to update hour:', data.message);
                    //             button.textContent = '签到失败';
                    //             message.textContent = '签到处理失败，请稍后再试。';
                    //             button.classList.remove('disabled'); // 允许再次尝试
                    //         }
                    //     }).catch(error => {
                    //     console.error('Error during fetch:', error);
                    //     button.textContent = '签到失败';
                    //     message.textContent = '签到处理时发生错误，请稍后再试。';
                    //     button.classList.remove('disabled'); // 允许再次尝试
                    // });
                } else {
                    // 签到失败
                    button.textContent = '签到失败';
                    message.textContent = '您不在活动范围内，请靠近活动地点后再次尝试。';
                    console.log(distance);
                    button.classList.remove('disabled'); // 允许再次尝试
                }
            });
        });

        // 计算两点之间的距离（Haversine formula）
        function calculateDistance(lat1, lon1, lat2, lon2) {
            const R = 6371; // 地球半径，单位为公里
            const dLat = deg2rad(lat2 - lat1);
            const dLon = deg2rad(lon2 - lon1);
            const a =
                Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
                Math.sin(dLon / 2) * Math.sin(dLon / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            return R * c; // 返回距离，单位为公里
        }

        // 将角度转换为弧度
        function deg2rad(deg) {
            return deg * (Math.PI / 180);
        }
    });
</script>
</body>
</html>